<template>
	<view class="register">
		<view class="topbar">
			<text class="back" @tap="goback()"> < </text>
		</view>
		<view class="header">
			<view class="img">
				<image src="../../../static/icons/user.jpg"></image>
			</view>
		</view>
		<view class="main">
			<view class="tell">
				<input type="text" v-model="tell" maxlength="11" placeholder="手机号"></input>
			</view>
			<view class="psd">
				<input type="password" v-model="password" maxlength="6" placeholder="登录密码"></input>
			</view>
			<view class="username">
				<input type="text" v-model="username" maxlength="11" placeholder="用户名"></input>
			</view>
			<view class="nickname">
				<input type="text" v-model="nickname" maxlength="8" placeholder="昵称"></input>
			</view>
			<view class="code">
				<input type="text" v-model="code" maxlength="6" placeholder="验证码"></input>
				<text>获取验证码</text>
			</view>
		</view>
		<button @tap="doregister">注册</button>
		<view class="footer">
			<view class="aggree">
				<label>
					<checkbox /><text>同意</text>
				</label>
			</view>
			<text class="nego">《协议》</text>
		</view>
	</view>
</template>

<script>
	import registerApi from '@/api/login/register.js'
	export default{
		data() {
			return {
				tell:'',
				password:'',
				username:'',
				nickname:'',
				code:''
			};
		},
		onLoad(option) {
			
		},
		methods:{
			goback(){
				uni.navigateBack({
				    delta: 1
				});
			},
			async doregister(){
				var res = await registerApi.register({
					tel:this.tell,
					username:this.username,
					nickname:this.nickname,
					password:this.password,
					avatar:'http://localhost:8081/static/icons/user.jpg'
				})
				console.log(res)
				var info = {
					tel:this.tell,
					username:this.username,
					nickname:this.nickname,
					password:this.password
				}
				uni.setStorageSync('userInfo',JSON.stringify(info))
				uni.navigateTo({
				    url: `/pages/mine/login/login?username=${this.username}&password=${this.password}`,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register{
		.topbar{
			position: relative;
			left: 0;
			top: 0;
			background-color: #354e44;
			color: #fff;
			width: 100%;
			height: 44px;
			line-height: 44px;
			text-align: center;
			z-index: 998;
			.back{
				font-size: 24px;
				position: absolute;
				left: 20px;
			}
		}
		.header{
		    width: 80px;
		    height: 80px;
		    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
		    border-radius: 50%;
		    background-color: #000000;
		    margin-top: 64px;
		    margin-bottom: 36px;
		    margin-left: auto;
		    margin-right: auto;
			.img{
			    width: 80px;
			    height: 80px;
			    border-radius: 50%;
			    display: inline-block;
			    overflow: hidden;
			    position: relative;
				image{
				    width: 100%;
				    height: 100%;
				}
			}
		}
		.main{
		    display: flex;
		    flex-direction: column;
		    padding-left: 35px;
		    padding-right: 35px;
			view{
				border: none;
			    border-radius: 2.5rem;
			    box-shadow: 0 0 30px 0 rgba(43,86,112,.1);
			}
			.tell,
			.psd,
			.username,
			.nickname,
			.code{
				display: flex;
			    flex-direction: row;
			    justify-content: space-between;
			    align-items: center;
			    height: 18px;
			    color: #333333;
			    padding: 16px;
			    margin-top: 12px;
			    margin-bottom: 12px;
				input{
				    flex: 1;
				    text-align: left;
				    font-size: 14px;
				    padding-right: 5px;
				    margin-left: 10px;
					display: block;
				    line-height: 1.4em;
				    height: 1.4em;
				    min-height: 1.4em;
				    overflow: hidden;
					color: #333333;
				}
			}
			.code{
				text{
					font-size: 12px;
				}
			}
		}
		button{
		    background: rgb(53, 78, 68);
		    color: rgb(255, 255, 255);
			border-radius: 2.5rem;
			box-shadow: 0 0 30px 0 rgba(0,0,0,.2);
			transition: all 0.4s;
		    font-size: 15px;
		    width: 300px;
		    height: 50px;
		    line-height: 50px;
		    text-align: center;
		    margin-left: auto;
		    margin-right: auto;
		    margin-top: 48px;
		    overflow: hidden;
			position: relative;
			display: block;
		    padding-left: 14px;
		    padding-right: 14px;
		    box-sizing: border-box;
		}
		.footer{
			display: flex;
		    flex-direction: row;
		    justify-content: center;
		    align-items: center;
		    font-size: 14px;
		    margin-top: 32px;
		    color: rgba(0,0,0,0.7);
		    text-align: center;
		    height: 20px;
		    line-height: 20px;
			.aggree{
				font-size: 12px;
			    margin-left: 7px;
			    margin-right: 7px;
			    font-style: normal;
			    color: rgba(0,0,0,0.7);
			    text-align: center;
			    line-height: 20px;
				text{
					width: 24px;
					height: 12px;
				}
			}
			.nego{
			    height: auto;
			    width: auto;
				font-size: 12px;
			    display: block;
			    cursor: pointer;
			}
		}
	}
</style>
